<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Butterfly—表单美化组件demo</title>
    <link rel="stylesheet" type="text/css" href="http://bootswatch.com/cerulean/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="http://bootswatch.com/assets/css/bootstrap-responsive.css"/>
    <link rel="stylesheet" type="text/css" href="http://bootswatch.com/css/docs.css"/>
    <link rel="stylesheet" type="text/css" href="../../assets/style.css"/>
    <script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy.js" charset="utf-8"></script>
</head>
<body>
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="http://www.36ria.com/demo/gal/gallery/form/1.2/demo.html" id="logo">KF(kissy-form)</a>

            <div class="nav-collapse">

                <ul class="nav">
                    <li><a href="http://news.bootswatch.com">Home</a></li>
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Components <b
                            class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="/default">Default</a></li>
                            <li class="divider"></li>
                            <li><a href="/amelia">Amelia</a></li>
                            <li><a href="/cerulean">Cerulean</a></li>
                            <li><a href="/cyborg">Cyborg</a></li>
                            <li><a href="/journal">Journal</a></li>
                            <li><a href="/readable">Readable</a></li>
                            <li><a href="/simplex">Simplex</a></li>
                            <li><a href="/slate">Slate</a></li>
                            <li><a href="/spacelab">Spacelab</a></li>
                            <li><a href="/spruce">Spruce</a></li>
                            <li><a href="/superhero">Superhero</a></li>
                            <li><a href="/united">United</a></li>
                        </ul>
                    </li>
                    <li class="divider-vertical"></li>
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Download <b
                            class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a target="_blank" href="bootstrap.min.css">bootstrap.min.css</a></li>
                            <li><a target="_blank" href="bootstrap.css">bootstrap.css</a></li>
                            <li class="divider"></li>
                            <li><a target="_blank" href="variables.less">variables.less</a></li>
                            <li><a target="_blank" href="bootswatch.less">bootswatch.less</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav pull-right">
                    <li><a rel="tooltip" target="_blank" href="http://builtwithbootstrap.com/">kissy gallery</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <header class="jumbotron subhead" id="overview">
        <h1>Butterfly</h1>

        <p class="lead">表单美化组件.</p>

        <div class="subnav">
            <ul class="nav nav-pills">
                <li class="active"><a href="#typography">Typography</a></li>
                <li><a href="#navbar">Navbar</a></li>
                <li><a href="#buttons">Buttons</a></li>
                <li><a href="#forms">Forms</a></li>
                <li><a href="#miscellaneous">Miscellaneous</a></li>
            </ul>
        </div>
    </header>

    <section id="typography">
        <div class="page-header">
            <h1>简单demo</h1>
        </div>
        <form id="J_Form1" class="form-horizontal well">
            <fieldset>
                <legend>注册</legend>
                <div class="control-group">
                    <label class="control-label" for="input01">用户名</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge" id="input01" placeholder="只能是英文、数字">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">性别：</label>
                    <div class="controls">
                        <label class="radio inline">
                            <input class="text" type="radio" name="sex" value="男"/>男
                        </label>
                        <label class="radio inline">
                            <input class="text" type="radio" name="sex" value="女"/>女
                        </label>
                        <label class="radio inline">
                            <input class="text" type="radio" name="sex" value="其他"/>其他
                        </label>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">爱好</label>

                    <div class="controls">
                        <label class="checkbox inline">
                            <input type="checkbox" value="option1">
                            爬山
                        </label>
                        <label class="checkbox inline">
                            <input type="checkbox" value="option2">
                            游泳
                        </label>
                        <label class="checkbox inline">
                            <input type="checkbox" value="option3">
                            旅游
                        </label>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="select01">Select list</label>

                    <div class="controls">
                        <select id="select01">
                            <option>something</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="multiSelect">Multicon-select</label>

                    <div class="controls">
                        <select multiple="multiple" id="multiSelect">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="fileInput">File input</label>

                    <div class="controls">
                        <input class="input-file" id="fileInput" type="file">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="textarea">Textarea</label>

                    <div class="controls">
                        <textarea class="input-xlarge" id="textarea" rows="3"></textarea>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="focusedInput">Focused input</label>

                    <div class="controls">
                        <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">Uneditable input</label>

                    <div class="controls">
                        <span class="input-xlarge uneditable-input">Some value here</span>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="disabledInput">Disabled input</label>

                    <div class="controls">
                        <input class="input-xlarge disabled" id="disabledInput" type="text"
                               placeholder="Disabled input here…"
                               disabled="">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="optionsCheckbox2">Disabled checkbox</label>

                    <div class="controls">
                        <label class="checkbox">
                            <input type="checkbox" id="optionsCheckbox2" value="option1" disabled="">
                            This is a disabled checkbox
                        </label>
                    </div>
                </div>
                <div class="control-group warning">
                    <label class="control-label" for="inputWarning">Input with warning</label>

                    <div class="controls">
                        <input type="text" id="inputWarning">
                        <span class="help-inline">Something may have gone wrong</span>
                    </div>
                </div>
                <div class="control-group error">
                    <label class="control-label" for="inputError">Input with error</label>

                    <div class="controls">
                        <input type="text" id="inputError">
                        <span class="help-inline">Please correct the error</span>
                    </div>
                </div>
                <div class="control-group success">
                    <label class="control-label" for="inputSuccess">Input with success</label>

                    <div class="controls">
                        <input type="text" id="inputSuccess">
                        <span class="help-inline">Woohoo!</span>
                    </div>
                </div>
                <div class="control-group success">
                    <label class="control-label" for="selectError">Select with success</label>

                    <div class="controls">
                        <select id="selectError">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                        <span class="help-inline">Woohoo!</span>
                    </div>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">Save changes</button>
                    <button type="reset" class="btn">Cancel</button>
                </div>
            </fieldset>
        </form>
    </section>
</div>


<div class="eg">
    <h3>示例 - 用户注册</h3>

    <form method="post" id="J_Form">
        <ul class="form">
            <li>
                <label class="hd">用户名：</label>
                <input id="username" class="text" type="text" value="test@tb.com" required
                       data-valid="{required:'必填'}"/>
            </li>

            <li>
                <label class="hd">密码：</label>
                <input class="text" type="text" name="password" id="password" required pattern="[A-z]{3}"
                       data-valid="{required:'密码必填',pattern:'密码格式不正确'}"/>
            </li>

            <li>
                <label class="hd">重复密码：</label>
                <input class="text" type="text" name="repassword" data-valid="{equalTo:'两次密码不一致了'}"
                       equalTo="#password"/>
            </li>

            <li>
                <label class="hd">邮箱：</label>
                <input class="text" type="text"
                       pattern="^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$"
                       data-valid="{pattern:'邮箱格式不对'}"/>
            </li>

            <li>
                <label class="hd">银行卡：</label>
                <input class="text" type="text" id="card"/>
            </li>

            <li>
                <label class="hd">性别：</label>
                <input class="text" type="radio" name="sex" value="男"/>男
                <input class="text" type="radio" name="sex" value="女"/>女
                <input class="text" type="radio" name="sex" value="其他" required="required"
                       data-valid="{required:'性别必填'}"/>其他
            </li>

            <li>
                <label class="hd">个人主页：</label>
                <input class="text" type="text"/>
            </li>

            <li>
                <label class="hd">兴趣：</label>
                <input class="text" type="checkbox" name="interest" value="爬山"/>爬山
                <input class="text" type="checkbox" name="interest" value="游泳"/>游泳
                <input class="text" type="checkbox" name="interest" value="旅游"/>旅游
                <input class="text" type="checkbox" name="interest" value="睡觉"/>睡觉
                <input class="text" type="checkbox" name="interest" value="吃饭" id="interest"/>吃饭
            </li>

            <li>
                <label class="hd">上传头像：</label>
                <input type="file" required data-valid="{required:'请选择头像图片'}"/>
            </li>

            <li>
                <button type="submit">提交</button>
            </li>

        </ul>
    </form>
    <script>
        KISSY.config({
            packages:[
                {
                    name:'gallery',
                    path:'../../../../../../',
                    charset:'utf-8'
                }
            ]
        });
        KISSY.use("gallery/form/1.2/butterfly/index", function (S, Butterfly) {
            var butterfly = new Butterfly('#J_Form1');
            butterfly.render();
        });

    </script>
</div>


</body>
</html>
